<template>
  <div class="main">
    <div class="block text-center carousel-container" m="t-4">
      <el-carousel trigger="click" >
        <el-carousel-item height="200px" v-for="item in images" :key="item.src">
          <img :src="item.src" :alt="item.alt" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box1">
<!--显示图片，昵称，点赞数-->
      <ul class="custom-list">
        <li class="list" v-for="post in myposts.tableData" :key="post.post_id">
          <img class="post-image"  :src="post.image_url" alt="图片">
          <p class="title" > {{ post.title }} </p>
          <div class="post-info">
            <span style="margin-right: 50px " class="author-name"><i class="iconfont icon-guanzhudianpu"></i>
              {{ post.nickname }} </span>
            <span class="like-count"><i  class="iconfont icon-dianzan"
                       @click="addLikes(post.post_id)"></i> {{ post.count }}</span>
          </div>
        </li>
      </ul>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted,onUnmounted,reactive } from 'vue';
import { ElMessage } from 'element-plus'
import { Plus, Delete,Calendar, Search } from '@element-plus/icons-vue'
import axios from '@/utils/axios'
import { useRouter } from 'vue-router'
// 轮播图片数据
const images = [
  { src: 'https://inews.gtimg.com/om_bt/OL31xKkCB-6X5oLn8Gs0ZrJGe6eQMUhouhp95lcZwS548AA/1000', alt: 'Image 1' },
  { src: 'https://img.youjidi.net/uploadimg/image/20180320/20180320104229_83379.jpg', alt: 'Image 2' },
  { src: 'https://5b0988e595225.cdn.sohucs.com/images/20180327/3310d4e5d6f14db3a082063257f7b753.jpeg', alt: 'Image 3' },
  { src: 'https://5b0988e595225.cdn.sohucs.com/images/20190202/939e7dbf6a2c492c9d8ee7b90b13f32a.jpeg', alt: 'Image 4' }
];
const myposts = reactive(
  {
    tableData:[]
  }
);
const getMyposts = () => {
 axios.get("/myposts/get").then(res => {
    console.log(res);
      myposts.tableData = res;
      console.log("adfsf:", myposts);
  }).catch(() => {
    ElMessage({
      message: '获取数据失败',
      type: 'error'
    });
});
}
const addLikes=(post_id)=>{
  myposts.tableData.post_id=post_id;
  axios.get("/myposts/addLikes?id="+post_id)
      .then(res=>{
        getMyposts();
      })
}
onMounted(() => {
getMyposts();
})
</script>

<style scoped>
.main {
  position: relative; /* 设置相对定位，为绝对定位提供上下文 */
  min-height: 100vh; /* 确保至少占满视口高度 */
}
li{
  list-style: none;
  border: 1px solid #ccc;
  margin: auto;
  border-radius: 5px;
}
.carousel-container {
  position: fixed; /* 固定定位 */
  top: 0; /* 固定在顶部 */
  left: 0;
  right: 0;
  z-index: 1000; /* 提升层级，防止被其他元素覆盖 */
}
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片原始比例填充整个容器 */
}
ul{
  flex-wrap: wrap; /* 允许换行 */
}

.box1 {
  margin-top: 305px; /* 避免与轮播图重叠 */
  border: 1px solid black;
  height: 600px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* 其他样式 */
}

.custom-list {
  list-style: none; /* 移除列表符号 */
  padding: 0; /* 清除内边距 */
  margin: 0 ; /* 清除外边距 */
  display: flex;
  height: auto;
}

.list {
  display: flex;
  height: auto;
  flex-direction: column; /* 改为垂直方向堆叠 */
  align-items: center;
}

.post-image {
  width: 160px;
  height: 150px;
  margin: auto;
}

.post-info {
  display: flex;
  flex-direction: row; /* 改为垂直方向堆叠 */
  align-items: center;
  justify-content: center;
  gap: 5px; /* 信息间的间距 */
  margin-bottom: 10px;
}

.author-name {
  font-weight: bold;
}

.like-count {
  color: gray;
}


</style>